<template>
  <div class="transferAccount" :class="walletList.length==0?'noWalletBox':''">
    <div class="navFixed headerBox">
      <van-nav-bar
          class="navStyle1"
          title="收款"
          left-arrow
          @click-left="goBack"
        ></van-nav-bar>
    </div>
    <div v-show="walletList.length>0">
      <p class="txt1">钱包名称</p>
      <p @click="showPicker=true" class="txt2" v-if="walletSelect">{{walletSelect.walletName}}</p>
      <div class="erCode">
        <div id="qrcode" ref="qrcode"></div> 
        <!-- <img src="@/assets/img/wallet/WechatIMG27@2x.png" alt=""> -->
      </div>
      <div class="address" v-if="walletSelect">
        <span class="txt3">{{walletSelect.walletAddr}}</span>
        <span class="txt4" id="copyTxt" @click="copyUrl" :data-clipboard-text="walletSelect.walletAddr">复制</span>
      </div>
      <van-popup v-model="showPicker" position="bottom" get-container="body">
        <van-picker
          show-toolbar
          :columns="walletList"
          @cancel="showPicker = false"
          @confirm="onConfirm"
          value-key="walletName"
        />
      </van-popup>
    </div>
    <div class="noWallet" v-show="walletList.length==0">
      <img src="@/assets/img/wallet/souk.png" alt="">
      <p>您还没有钱包哟</p>
      <p class="handlerBtn" @click="go('walletManage')">创建钱包</p>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2"; 
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      showPicker:false,
      walletSelect:{},
      walletList: [],
    }
  },
  mounted(){
    // this.getUserWalletList()
  },
  methods:{
    go(name) {
      this.$router.push({ name: name });
    },
    qrcode (walletAddr) {
      this.$refs.qrcode.innerHTML = ''
      let qrcode = new QRCode("qrcode", {
        width: 180,
        height: 180,
        text: `${walletAddr}`
      });
    },
    async getUserWalletList(){
        this.$toast.loading({
            message: '加载中...',
            forbidClick: true,
            duration:5000
        });
        let res = await this.$http.getUserWalletList();
        if (res) {
          this.walletList =res.data
          this.walletSelect=res.data[0]
          this.qrcode(this.walletSelect.walletAddr)
          this.$toast.clear()
        } else {
          this.$toast.clear()
        }
    },
    goBack(){
      this.$router.go(-1)
    },
    onConfirm(value, index) {
      this.showPicker = false;
      if(JSON.stringify(this.walletSelect)!=JSON.stringify(value)) {
        this.qrcode(value.walletAddr)
      }
      this.walletSelect=value
    },
    // 复制
    copyUrl () {
      let self = this
      var clipboard = new Clipboard('#copyTxt')
      clipboard.on('success', e => {
        self.$toast('复制成功')
      })
    },
  }
};
</script>
<style scoped>
.headerBox{
  background: transparent;
}
.transferAccount.noWalletBox{
  background: url('../../assets/img/wallet/moon-1@3x.png') no-repeat center bottom;
  background-size: cover;
}
.transferAccount{
  height: 100vh;
  text-align: center;
  color: #FFF;
  background: url('../../assets/img/wallet/img_dai@3x.png') no-repeat center bottom;
  background-size: cover;
  overflow: hidden;
}
.navFixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.bgImg{
  width: 100%;
}
.txt1{
  font-size: 0.29rem;
  color: #C8CEDA;
  margin-top: 1.3rem;
  margin-bottom: 0.3rem;
}
.txt2{
  font-size: 0.4rem;
  margin-bottom: 0.4rem;
}
.txt2::after{
  display: inline-block;
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  background: url('../../assets/img/wallet/icon_xiangxia@2x.png') no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-left: 0.08rem;
}
.erCode{
  display: inline-block;
  background: #F4F4F4;
  border-radius: 0.32rem;
  margin: 0 auto;
  margin-bottom: 0.6rem;
  padding: 0.2rem;
}
.address{
  margin: 0 1.24rem;
  line-height: 0.48rem;
}
.txt3{
  font-size: 0.29rem;
  word-break: break-all;
  margin-right: 0.2rem;
}
.txt4{
  display: inline-block;
  font-size: 0.29rem;
  color: #F6741F;
}
.noWallet{
  height: calc(100vh - 46px);;
  text-align: center;
  font-size: 0.32rem;
  color: #999;
}
.noWallet img{
  width: 100%;
  margin-top: 2rem;
  opacity: 0.1;
}
.handlerBtn {
  height: 0.82rem;
  line-height: 0.82rem;
  border-radius: 0.41rem;
  text-align: center;
  color: #fff;
  font-size: 0.34rem;
  width: 2.58rem;
  background: #00c8e7;
  margin: 0 auto;
  margin-top: 0.6rem;
}
</style>
